<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model双向绑定</title>
</head>

<body>
  <div id="app">
    <div>
      <!-- v-model是个语法糖（推荐） -->
      <!-- v-model使用场景=》表单提交=》登录功能 -->
      <input type="text" placeholder="请输入用户名" v-model="val">
      <input type="password" placeholder="请输入密码" v-model="pwd">
      <!-- 自己实现双向绑定
        思路：数据改变是相互的=》1.视图中数据的改变会同步到data中 2. data中数据改变刷新视图
        视图中用户输入最新值=》改变data中的值=？怎么实现？=》通过input事件
      -->
      <!-- <input type="text" :value="val" @input="changeValue"> -->

      <!-- 获取input的值=>测试 -->
      <button @click="changeVal">改变输入框的值</button>
      <!-- 提交表单 -->
      <button @click="submit">提交</button>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 用户名
        val: 'hi 双向绑定！',
        // 密码
        pwd: ''
      },
      methods: {
        // 提交表单
        submit() {
          console.log('获取用户输入的最新值：', this.val, this.pwd)
          // 后续可以调用接口登录
        },
        // 视图改变修改data中值
        changeValue(e) {
          // 1. 通过event对象获取当前输入最新的值
          console.log(e.target.value)
          // 2. 修改data中的值
          this.val = e.target.value
        },
        // 改变值=》测试
        changeVal() {
          this.val = Math.random() * 100
        }
      }
    })
  </script>
</body>

</html>